<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			html,body{width: 100%;height: 100%;margin:0;padding:0;background: #EEEEEE;}
			ul,li{margin:0;padding:0;background:#FFFFFF;border-bottom: 1px solid #CCCCCC;}
			li{list-style: none;height:30px}
			.header,.footer{
				height:44px;
				position: fixed;
				text-align: center;
				line-height: 44px;
				width:100%;
				z-index: 1000;
			}
			.header{top:0;background: orchid;}
			.footer{bottom: 0;background: orchid;}
			#wrapper{
				width: 100%;
				position: absolute;
				top:44px;
				bottom: 44px;
				overflow: hidden;
				left: -9999px;
			}
			#wrapper li{height:30px;line-height: 30px;}
			#pulldown,#pullup{
				height:44px;
				line-height: 44px;
			}
		</style>
	</head>
	<body>
		<div class="header">header</div>
		<div id="wrapper">
			<div>
				<div id="pulldown"><div class="icon">pulldown</div></div>
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
					<li>6</li>
					<li>7</li>
					<li>8</li>
					<li>9</li>
					<li>10</li>
					<li>11</li>
					<li>12</li>
					<li>13</li>
					<li>14</li>
					<li>15</li>
					<li>16</li>
					<li>17</li>
					<li>18</li>
					<li>19</li>
					<li>20</li>
				</ul>
				<div id="pullup">
					<div class="icon">pullup</div>
				</div>
			</div>
		</div>
		<div class="footer">footer</div>
		<script src="js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/iscroll.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				var startY = 44;
				var type = null;
				var myscroll = new IScroll("#wrapper",{
					"startY":-startY
				});
				
				var downAction = function(){
					setTimeout(function(){
						for(var i=0;i<3;i++)
						{
							var date = new Date();
							$("#wrapper li:first-child").before($("<li>"+date.getTime()+"</li>"));
						}
						myscroll.refresh();
					},1000)
				}
				var upAction = function(){
					setTimeout(function(){
						for(var i=0;i<3;i++)
						{
							var date = new Date();
							$("#wrapper li:last-child").after($("<li>"+date.getTime()+"</li>"));
						}
						var wrah = $("#wrapper").height()
						var ulh = $("#wrapper ul").height();
						startY = ulh-wrah+31*3-44;
						myscroll.refresh();
					},1000)
				}
				
				myscroll.on("scrollEnd",function(){
					var direction = this.directionY;
					if(direction<0)
					{
						type = "down";
						downAction();
					}
					else if(direction>0)
					{
						type = "up";
						upAction();
					}				
				})
				
				myscroll.on("refresh",function(){
					if(type=="down")
					{
						this.scrollTo(0,-startY,800);
					}
					else if(type=="up"){
						this.scrollTo(0,-startY,800);
					}
				})
				
				setTimeout(function(){
					$("#wrapper").css("left","0")
				},800)
			})
		</script>
	</body>
</html>
